<template>
  <div style="height: 100%">
    <div style="height: 15%">
      <el-form
        ref="elForm"
        :inline="true"
        :model="formProjectData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="项目" prop="project_id">
          <el-select
            v-model="formProjectData.project_id"
            placeholder="请选择项目"
            @change="selectService(formProjectData.project_id)"
            filterable
            clearable
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.project_name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务" prop="service_id">
          <el-select
            v-model="formServiceData.service_id"
            placeholder="请选择服务"
            @change="selectVersion(formServiceData.service_id)"
            filterable
            clearable
            :disabled="formProjectData.project_id === '' ? true : false"
          >
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.service_name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本" prop="version_id">
          <el-select
            v-model="formVersionData.version_name"
            placeholder="请选择版本"
            @change="selectCaseList(formVersionData.version_id)"
            filterable
            clearable
            :disabled="formServiceData.service_id === '' ? true : false"
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.version_name"
              :value="item.version_name"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            :file-list="fileList"
            action="test/uploadcase/"
            :before-upload="beforeAvatarUpload"
            :on-success="UploadSuccessRead"
            :data="alldata()"
            :disabled="
              formVersionData.person === 1 ||
              formVersionData.version_name === ''
                ? true
                : false
            "
          >
            <el-button
              class="bt"
              type="primary"
              icon="el-icon-upload el-icon--right"
              :disabled="
                formVersionData.person === 1 ||
                formVersionData.version_name === ''
                  ? true
                  : false
              "
              >上传用例</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        round
        @click="openAddCase()"
        icon="el-icon-plus"
        size="small"
        >手动新增用例</el-button
      >
      <el-button type="danger" round @click="deleteALL()" size="small"
        >批量删除用例</el-button
      >
    </div>
    <div style="height: 80%">
      <el-table
        :data="caseList"
        @selection-change="handleRow"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        height="100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="expand" label="更多">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="接口域名">
                <span>{{ props.row.case_path }}</span>
              </el-form-item>
              <el-form-item label="接口URL">
                <span>{{ props.row.case_url }}</span>
              </el-form-item>
              <el-form-item label="接口请求类型">
                <span>{{ props.row.case_method }}</span>
              </el-form-item>
              <el-form-item label="数据格式">
                <span>{{ props.row.case_format }}</span>
              </el-form-item>
              <el-form-item label="接口请求参数">
                <span>{{ props.row.case_request_data }}</span>
              </el-form-item>
              <el-form-item label="接口检查点">
                <span>{{ props.row.case_check }}</span>
              </el-form-item>
              <el-form-item label="接口响应参数提取">
                <span>{{ props.row.case_relation_param }}</span>
              </el-form-item>
              <el-form-item label="接口关联编号">
                <span>{{ props.row.case_relation_id }}</span>
              </el-form-item>
              <el-form-item label="模板参数">
                <span>{{ props.row.template_param }}</span>
              </el-form-item>
              <el-form-item label="SQL结果断言">
                <span>{{ props.row.template_check }}</span>
              </el-form-item>
              <el-form-item label="SQL结果提取">
                <span>{{ props.row.template_relation_param }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用例编号" prop="case_id"> </el-table-column>
        <el-table-column label="用例名称" prop="case_name"> </el-table-column>
        <el-table-column label="SQL模板" prop="template_name">
          <template slot-scope="{ row }">
            {{ row.template_name || "空" }}
          </template>
        </el-table-column>
        <el-table-column label="是否运行" prop="case_on_off"> </el-table-column>
        <el-table-column label="自测结果">
          <template slot-scope="scope">
            <span v-if="scope.row.case_status == 0"
              ><el-tag>待执行</el-tag></span
            >
            <span v-if="scope.row.case_status == 1"
              ><el-tag type="info">执行中</el-tag></span
            >
            <span v-if="scope.row.case_status == 2"
              ><el-tag type="success">执行通过</el-tag></span
            >
            <span v-if="scope.row.case_status == 3"
              ><el-tag type="danger">执行失败</el-tag></span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <i class="el-icon-video-play" @click="caseStart(scope.row)"></i>
            &emsp;
            <i class="el-icon-edit" @click="loadingCase(scope.row.id)"></i
            >&emsp;
            <i class="el-icon-delete" @click="caseDelete(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增 -->
      <el-dialog title="新增用例" :visible.sync="addCaseLog" width="35%">
        <el-form :model="formCaseData" label-width="150px">
          <el-switch
            style="display: block"
            v-model="formCaseData.case_on_off"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="用例开启"
            inactive-text="用例关闭"
          >
          </el-switch
          ><br />
          <el-form-item label="用例编号:">
            <el-input class="button_" v-model="formCaseData.case_id"></el-input>
          </el-form-item>
          <el-form-item label="用例名称:">
            <el-input
              class="button_"
              v-model="formCaseData.case_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口域名:">
            <el-select
              v-model="formCaseData.case_path"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in hostList"
                :key="item.case_mapping_name"
                :label="item.case_mapping_name"
                :value="item.case_mapping_name"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求路径:">
            <el-input
              class="button_"
              v-model="formCaseData.case_url"
            ></el-input>
          </el-form-item>
          <el-form-item label="请求方法:">
            <el-select
              v-model="formCaseData.case_method"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in case_method"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据格式:">
            <el-select
              v-model="formCaseData.case_format"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in ['JSON', 'TEXT', 'FORM', 'XML', '其他']"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求参数:">
            <el-input
              class="button_"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formCaseData.case_request_data"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="预期结果:">
            <el-input
              class="button_"
              v-model="formCaseData.case_check"
            ></el-input>
          </el-form-item>
          <el-form-item label="参数传递变量:">
            <el-input
              class="button_"
              v-model="formCaseData.case_relation_param"
            ></el-input>
          </el-form-item>
          <el-form-item label="SQL模板:">
            <el-input
              class="button_"
              v-model="formCaseData.template_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板参数:">
            <el-input
              class="button_"
              v-model="formCaseData.template_param"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据库断言:">
            <el-input
              class="button_"
              v-model="formCaseData.template_check"
            ></el-input>
          </el-form-item>
          <el-form-item label="查询参数提取:">
            <el-input
              class="button_"
              v-model="formCaseData.template_relation_param"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addCaseLog = false">取 消</el-button>
          <el-button type="primary" @click="saveCase()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改单条用例 -->
      <el-dialog title="编辑用例" :visible.sync="updateCase" width="35%">
        <el-form :model="formCaseData" label-width="150px">
          <el-switch
            style="display: block"
            v-model="formCaseData.case_on_off"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="用例开启"
            inactive-text="用例关闭"
          >
          </el-switch
          ><br />
          <el-form-item label="用例编号:">
            <el-input class="button_" v-model="formCaseData.case_id"></el-input>
          </el-form-item>
          <el-form-item label="用例名称:">
            <el-input
              class="button_"
              v-model="formCaseData.case_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口域名:">
            <el-select
              v-model="formCaseData.case_path"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in hostList"
                :key="item.case_mapping_name"
                :label="item.case_mapping_name"
                :value="item.case_mapping_name"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求路径:">
            <el-input
              class="button_"
              v-model="formCaseData.case_url"
            ></el-input>
          </el-form-item>
          <el-form-item label="请求方法:">
            <el-select
              v-model="formCaseData.case_method"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in case_method"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据格式:">
            <el-select
              v-model="formCaseData.case_format"
              placeholder="请选择"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in ['JSON', 'TEXT', 'FORM', 'XML', '其他']"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求参数:">
            <el-input
              class="button_"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formCaseData.case_request_data"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="预期结果:">
            <el-input
              class="button_"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formCaseData.case_check"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="参数传递变量:">
            <el-input
              class="button_"
              v-model="formCaseData.case_relation_param"
            ></el-input>
          </el-form-item>
          <el-form-item label="关联用例编号:">
            <el-input
              class="button_"
              v-model="formCaseData.case_relation_id"
            ></el-input>
          </el-form-item>
          <el-form-item label="SQL模板:">
            <el-input
              class="button_"
              v-model="formCaseData.template_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板参数:">
            <el-input
              class="button_"
              type="textarea"
              :rows="3"
              v-model="formCaseData.template_param"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据库断言:">
            <el-input
              class="button_"
              type="textarea"
              :rows="3"
              v-model="formCaseData.template_check"
            ></el-input>
          </el-form-item>
          <el-form-item label="查询参数提取:">
            <el-input
              class="button_"
              v-model="formCaseData.template_relation_param"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateCase = false">取 消</el-button>
          <el-button type="primary" @click="updateCaseInfo()">更 新</el-button>
        </div>
      </el-dialog>
      <el-dialog
        style="heght: 40px"
        center
        title="响应结果"
        :visible.sync="openresp"
        width="30%"
        :before-close="handleClose"
      >
        <span v-if="respones.includes('{')">
          <json-viewer
            :value="JSON.parse(respones)"
            expand-depth="4"
            expanded
            boxed
            theme="jv-light"
            sort
          ></json-viewer>
        </span>
        <span v-else>{{ respones }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="openresp = false">取 消</el-button>
          <el-button type="primary" @click="openresp = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 150px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 90%;
}
.button_ {
  width: 200px;
}
.el-table {
  width: 100%;
}
input[type="file"] {
  display: none;
}
.el-button {
  width: auto !important;
}
</style>
<script>
import app from "@/api/interface";

export default {
  data() {
    return {
      openresp: false,
      addCaseLog: false,
      loadingbut: false,
      updateCase: false,
      username: app.user,
      formProjectData: {
        project_id: "",
        project_name: "",
      },
      formServiceData: {
        person: "",
        service_id: "",
        service_name: "",
      },
      formVersionData: {
        version_name: "",
        version_id: "",
      },
      formCaseData: {
        case_format: "",
        id: "",
        case_id: "",
        case_name: "",
        case_path: "",
        case_url: "",
        case_method: "",
        case_request_data: "",
        case_check: "",
        case_relation_param: "",
        case_relation_id: "",
        case_on_off: true,
        template_name: "",
        case_status: "",
        template_param: "",
        template_check: "",
        template_relation_param: "",
      },
      rules: {
        personList: [
          {
            required: true,
            message: "请选择人员",
            trigger: "change",
          },
        ],
        service: [
          {
            required: true,
            message: "请选择服务",
            trigger: "change",
          },
        ],
        version: [
          {
            required: true,
            message: "请选择版本",
            trigger: "change",
          },
        ],
      },
      personList: [
        {
          person: "测试",
        },
        {
          person: "开发",
        },
      ],
      projectList: [],
      serviceList: [],
      versionList: [],
      caseList: [],
      fileList: [],
      hostList: [],
      respones: [],
      case_method: [
        { value: "POST" },
        { value: "GET" },
        { value: "PUT" },
        { value: "DELETE" },
      ],
      case_id: [],
    };
  },

  mounted() {
    this.selectProject();
  },
  methods: {
    // 获取批量用例id
    handleRow(selectData) {
      this.case_id = selectData;
    },

    // 批量删除用例
    deleteALL() {
      let caseid = [];
      let case1 = [];
      for (case1 in this.case_id) {
        caseid.push(this.case_id[case1].id);
      }
      this.$axios
        .delete("/caseMoreDelete/", { data: { id: caseid } })
        .then((res) => {
          if (res.data.success == "true") {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.selectCaseList();
          } else {
            this.$message.error("删除失败~");
          }
        });
    },

    // 上传前的回调
    alldata() {
      return {
        project_id: this.formProjectData.project_id,
        service_id: this.formServiceData.service_id,
        version_name: this.formVersionData.version_name,
      };
    },

    // 查询项目
    selectProject() {
      this.formData = [];
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },
    // 查询服务
    selectService(project_id) {
      this.$axios
        .get("/serviceVersion/", { params: { project_id: project_id } })
        .then((res) => {
          if (res.status === 200) {
            console.log(this.formData.person);
            this.serviceList = res.data;
            this.selectHost();
          }
        });
    },
    // 查询版本
    selectVersion(service_id) {
      this.$axios
        .get("/select_version/", { params: { service_id: service_id } })
        .then((res) => {
          this.versionList = res.data;
        });
    },
    // 上传前的校验
    beforeAvatarUpload(file) {
      const xlsx =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!xlsx) {
        this.$message.error("上传文件支持格式 .xlsx!");
      }
    },
    // 上传勾子函数
    UploadSuccessRead(res) {
      if (res.code == 0) {
        this.$message.error(res.msg);
      } else {
        this.selectCaseList(this.formVersionData.version_id);
      }
    },
    openAddCase() {
      (this.formCaseData = {}), (this.addCaseLog = true);
    },
    // 保存用例
    saveCase() {
      this.$axios
        .post("/saveCase/", {
          project_id: this.formProjectData.project_id,
          service_id: this.formServiceData.service_id,
          version_id: this.formVersionData.version_id,
          case_id: this.formCaseData.case_id,
          case_name: this.formCaseData.case_name,
          case_path: this.formCaseData.case_path,
          case_url: this.formCaseData.case_url,
          case_method: this.formCaseData.case_method,
          case_format: this.formCaseData.case_format,
          case_request_data: this.formCaseData.case_request_data,
          case_check: this.formCaseData.case_check,
          case_relation_param: this.formCaseData.case_relation_param,
          case_relation_id: this.formCaseData.case_relation_id,
          case_on_off: this.formCaseData.case_on_off,
          template_name: this.formCaseData.template_name,
          template_param: this.formCaseData.template_param,
          template_check: this.formCaseData.template_check,
          template_relation_param: this.formCaseData.template_relation_param,
        })
        .then((res) => {
          this.addCaseLog = false;
          this.selectCaseList(this.formVersionData.version_id);
        });
    },
    saveOneCase() {
      (this.targeturl = ""),
        this.$axios
          .get("/saveOneCase/", {
            params: {
              project_id: this.formProjectData.project_id,
              service_id: this.formServiceData.service_id,
              version_id: this.formVersionData.version_id,
            },
          })
          .then((res) => {
            this.selectCaseList(this.formVersionData.version_id);
          });
    },
    // 查询用例
    selectCaseList() {
      this.caseList = [];
      this.$axios
        .post("/selectCaseAll/", {
          project_id: this.formProjectData.project_id,
          service_id: this.formServiceData.service_id,
          version_name: this.formVersionData.version_name,
        })
        .then((res) => {
          this.caseList = res.data;
        });
    },

    // 执行用例方法
    caseStart(caseall) {
      (this.respones = []), console.log("用例行数据", caseall);
      this.$axios
        .post("/caseStart/", {
          caseall: caseall,
          project_id: this.formProjectData.project_id,
          service_id: this.formServiceData.service_id,
          version_id: this.formVersionData.version_id,
        })
        .then((res) => {
          this.respones = res.data;
          this.openrespones();
          this.selectCaseList(this.formVersionData.version_id);
        });
    },
    openrespones() {
      this.openresp = true;
    },

    // 修改用例时弹出窗口数据加载
    loadingCase(id) {
      this.updateCase = true;
      this.$axios.get("/getOneCase/", { params: { id: id } }).then((res) => {
        this.formCaseData = res.data[0];
      });
    },

    // 手动修改某条用例
    updateCaseInfo(id) {
      this.$axios
        .put("/updateCaseInfo/", {
          id: this.formCaseData.id,
          caseall: {
            project_id: this.formProjectData.project_id,
            service_id: this.formServiceData.service_id,
            version_id: this.formVersionData.version_id,
            case_id: this.formCaseData.case_id,
            case_name: this.formCaseData.case_name,
            case_path: this.formCaseData.case_path,
            case_url: this.formCaseData.case_url,
            case_method: this.formCaseData.case_method,
            case_format: this.formCaseData.case_format,
            case_request_data: this.formCaseData.case_request_data,
            case_check: this.formCaseData.case_check,
            case_relation_param: this.formCaseData.case_relation_param,
            case_relation_id: this.formCaseData.case_relation_id,
            case_on_off: this.formCaseData.case_on_off,
            template_name: this.formCaseData.template_name,
            template_param: this.formCaseData.template_param,
            template_check: this.formCaseData.template_check,
            template_relation_param: this.formCaseData.template_relation_param,
          },
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            (this.updateCase = false),
              this.$notify({
                title: "",
                dangerouslyUseHTMLString: true,
                message: res.data.msg,
              });
            this.selectCaseList(this.formVersionData.version_id);
          }
        });
    },

    caseDelete(id) {
      this.$axios.delete("/caseDelete/", { params: { id: id } }).then((res) => {
        if (res.data["success"] === "true") {
          this.$notify({
            title: "",
            dangerouslyUseHTMLString: true,
            message: res.data.msg,
          });
        }
        this.selectCaseList(this.formVersionData.version_id);
      });
    },
    selectHost() {
      this.$axios
        .get("/select_host/", {
          params: { project_id: this.formProjectData.project_id },
        })
        .then((res) => {
          if (res.status === 200) {
            this.hostList = res.data;
          }
        });
    },
  },
};
</script>

